<template>
  <div class="cityOuter">
    <header class="header fix">
      <a href="javascript:;" class="backImg" @click="flightIndexBack"></a>
      <span class="selStation">{{selStation}}</span>
      <a class="rightTitle" href="javascript:;"></a>
    </header>
    <div class="titleItem">
      <input type="text" maxlength="30" placeholder="请输入城市名/拼音/首字母" v-model.trim="cityName" @input="change($event)" class="cityInput"/>
    </div>
    <div class="hotBox" v-show="show">
      <div class="currentItem">
        <p class="currentItemsub">热门城市</p>
        <div class="currentItemsubInfo">
            <ul>
              <li class="cityItem jiakuan" v-for="(hotItem,index) in hotItems" @click="flightIndex(index)">
                {{hotItem.nameCn}}
              </li>
            </ul>
        </div>
      </div>
    </div>
    <div class="selectBox currentItemsubInfo" v-show="!show">
      <ul>
        <li class="cityItem" v-for="(selItem,index) in selItems" @click="flightIndex1(index)">
          <p>{{selItem.nameCn}}</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        selStation: '选择城市',
        show: true,
        goTem:'',
        backTem:'',
        cityName: '',
        hotItems: [],
        selItems: []
      }
    },
    methods: {
      change (e, show) {
        this.value = e.target.value;
        if (this.value == '') {
          this.show = true;
        } else {
          var that = this;
          var curData = that.value;
          that.$flight.flightCityList({cityName: this.value}, function (res) {
              that.show = false;
              that.selItems = res;
          }, function (err) {
            $flightTools.errorToIndex(that);
          })
        }
      },
      flightIndexBack(){
        this.$router.go(-1)
      },
      flightIndex(index) {
        if (this.go == 'go') {
          this.$store.state.flight.go = this.hotItems[index].nameCn.replace('市', '');
          this.$store.state.flight.fromCityCode = this.hotItems[index].code;
          this.$store.state.flight.fromCityId = this.hotItems[index].cityId; //id
          this.$store.state.flight.fromCityName = this.hotItems[index].cityName.replace('市', '');  //机场对应的城市名称
          this.$store.state.flight.fromType = this.hotItems[index].type; //机场类型
          this.$router.go(-1)
        }
        if (this.go == 'back') {
          this.$store.state.flight.back = this.hotItems[index].nameCn.replace('市', '');
          this.$store.state.flight.toCityCode = this.hotItems[index].code;
          this.$store.state.flight.toCityId = this.hotItems[index].cityId; //id
          this.$store.state.flight.toCityName = this.hotItems[index].cityName.replace('市', '');  //机场对应的城市名称
          this.$store.state.flight.toType = this.hotItems[index].type; //机场类型
          this.$router.go(-1)
        }
      },
      flightIndex1(index){
        if (this.go == 'go') {
          this.$store.state.flight.go = this.selItems[index].nameCn.replace('市', '');
          this.$store.state.flight.fromCityCode = this.selItems[index].code;
          this.$store.state.flight.fromCityId = this.selItems[index].cityId; //id
          this.$store.state.flight.fromCityName = this.selItems[index].cityName.replace('市', '');  //机场对应的城市名称
          if(this.$store.state.flight.go.indexOf('机场') != -1) {
            this.$store.state.flight.go = this.$store.state.flight.fromCityName+'('+this.$store.state.flight.go+')';
          }
          this.$store.state.flight.fromType = this.selItems[index].type; //机场类型
          this.$router.go(-1)
        }
        if (this.go == 'back') {
          this.$store.state.flight.back = this.selItems[index].nameCn.replace('市', '');
          this.$store.state.flight.toCityCode = this.selItems[index].code;
          this.$store.state.flight.toCityId = this.selItems[index].cityId; //id
          this.$store.state.flight.toCityName = this.selItems[index].cityName.replace('市', '');  //机场对应的城市名称
          if(this.$store.state.flight.back.indexOf('机场') != -1) {
            this.$store.state.flight.back = this.$store.state.flight.toCityName+'('+this.$store.state.flight.back+')';
          }
          this.$store.state.flight.toType = this.selItems[index].type; //机场类型
          this.$router.go(-1)
        }
      },
    },
    created() {
      let that = this;
      if(that.$store.state.flight.hotCityName <= 0) {
        that.$flight.flightCityList({
          isHotCity: true
        }, res => {
          that.hotItems = res;
          that.$store.state.flight.hotCityName = res;
        }, err => {
          $flightTools.errorToIndex(that);
        })
      } else {
        that.hotItems =  that.$store.state.flight.hotCityName;
      }

    },
    mounted(){
      this.go = this.$route.query.go;
    }
  }
</script>

<style scoped>
  .header {
    background: #46a1bb;
    height: 2.2rem;
    background-size: cover;
    font-size: .8rem;
    color: #fff;
    width: 100%;
    padding: 0 .75rem;
    box-sizing: border-box;
    display: flex;
  }
  .backImg {
    float: left;
    flex:  0 0 15%;
    height: 2.2rem;
    line-height: 2.2rem;
    text-align: left;
    background: url('../../../assets/images/back.png') no-repeat left center;
    background-size: .6rem 1.1rem;
  }
  .rightTitle {
    flex:  0 0 15%;
  }
  .selStation {
    line-height: 2.2rem;
    flex:  0 0 70%;
    text-align: center;
  }
  .cityOuter {
    width: 100%;
    font-size: .75rem;
    background: #f0f0f0;
  }
  .selectBox {
    margin-top: .25rem;
    background: #fff;
    padding-left: .7rem;
    padding-top: .5rem;
    padding-bottom: .5rem;
  }
  .cityInput {
    width: 100%;
    height: 2.5rem;
    font-size: .75rem;
    padding-left: .7rem;
    border: none;
  }
  .titleItem {
    width: 100%;
  }
  .currentItem {
    background-color: #fff;
  }
  .currentItemsub {
    margin: .25rem 0 .5rem .7rem;
    padding-top: .5rem;
  }
  .currentItemsubInfo {
    border-bottom: 1px solid #f0f0f0;
  }
  .currentItemsubInfo ul{
    display: flex;
    flex-wrap:wrap;
  }
  .cityItem {
    width: 25%;
    text-align: center;
    margin: .375rem 0;
  }
  .cityItem p{
    padding: 0 .3rem;
    width: 80%;
    height: 1.25rem;
    border: 1px solid #46a1bb;
    border-radius: .1rem;
    color: #808080;
    line-height: 1.25rem;
    margin-top: .225rem;
    font-size: .75rem;
    box-sizing: border-box;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .jiakuan{
    margin-bottom: 1rem;
  }
</style>
